<template>
  <div id="work-box" ref="workBox">
    <cs-header v-if="sysNameObj.systemSwitch === 'ON'"></cs-header>
    <tc-header v-else></tc-header>
    <!-- 菜单开始 -->
    <el-container>
      <el-aside width="200px">
        <el-menu background-color="#333" text-color="#bbb" :router="true" default-active="/work/workspace">
          <el-menu-item v-for="(item, index) in menuList" :key="index" :index="item.url">
            <span slot="title">{{item.text}}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
    <!-- 菜单结束 -->
    </div>
  </template>
<script>
import csHeader from '../comm/self/header'
import tcHeader from '../comm/other/header'
import VToolbar from './comm/iToolbar/iToolbar'
import VDialog from './comm/iDialog/iDialog'
import { nextPage } from '../../assets/js'
import { mapMutations, mapState } from 'vuex'
import { mixinParams } from '../../assets/js/iapMixin'
import api from '../../api/url'
import ajax from '../../api/ajax/ajax'
import sysNameObj from '../../sysNameObj'
export default {
  name: 'workIndex',
  components: {
    csHeader,
    tcHeader,
    VToolbar,
    VDialog
  },
  mixin: [mixinParams],
  data () {
    return {
      editMode: 'ADD',
      editDialogShow: false,
      height: null,
      workspaceList: [],
      workspaceForm: {},
      menuList: [
        {index: 1, text: '工作区管理', url: '/work/workSpace'},
        {index: 2, text: '素材管理', url: '/work/materialMgr'},
        {index: 3, text: '版本发布', url: '/work/versSetting'},
        {index: 4, text: '灰度用户组设置', url: '/work/appGrayPublish'},
        {index: 5, text: '工作区灰度设置', url: '/work/grayPublish'}
      ],
      workRules: {
        Id: [
          { required: true, message: '工作区ID不能为空', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9.]*$/, message: '工作区ID只能由字母、数字和.组成', trigger: 'blur' }
        ],
        Name: [
          { required: true, message: '工作区名称不能为空', trigger: 'blur' }
        ]
      },
      tableLoading: true,
      sourceId: '',
      sysNameObj: sysNameObj
    }
  },
  computed: {
    ...mapState([
      'appId'
    ])
  },
  methods: {
    ...mapMutations([
      'pd_updateWorkspaceId',
      'pd_updateWorkspaceName',
      'pd_updateAppId'
    ]),
    // 工具栏操作
    handleToolClick (oprType) {
      switch (oprType) {
        case 'add':
          this.addWorkspace()
          break
        default:
          break
      }
    },
    // 获取工作区列表
    getWorkspaceList () {
      let getData = {
        AppId: this.appId
      }
      ajax.get(api.QUERY_WORKSPACE_LIST, getData).then(res => {
        if (res.Code === 0) {
          if (res.Workspaces) {
            this.workspaceList = JSON.parse(JSON.stringify(res.Workspaces))
          } else {
            this.workspaceList = []
          }
        }
        this.tableLoading = false
      })
    },
    // 进入工作区
    gotoWorkspace (data) {
      ajax.get(api.GOTO_WORKSPACE, {id: data.Id}).then(res => {
        if (res.Code === 0) {
          this.pd_updateWorkspaceId(data.Id)
          this.pd_updateWorkspaceName(data.Name)
          nextPage('/home/materialMgr')
        }
      })
    },
    // 新增工作区
    addWorkspace () {
      this.editMode = 'ADD'
      this.editDialogShow = true
    },
    // 克隆工作区
    cloneWorkspace (data) {
      this.editMode = 'CLONE'
      this.editDialogShow = true
      this.sourceId = data.Id
    },
    // 删除工作区
    delWorkspace (data) {
      this.$confirm('确定要删除该工作区吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let rmdata = {
          id: data.Id
        }
        ajax.get(api.DELETE_WORKSPACE, rmdata).then(res => {
          if (res.Code === 0) {
            this.getWorkspaceList()
            this.$message({
              type: 'success',
              message: '工作区删除成功'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    // 设置为当前工作区
    setCurrentWorkspace (data) {
        this.$confirm('确定要设置该工作区为当前工作区吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let postData = {
            Id: data.Id,
            AppId: this.AppId
          }
          ajax.post(api.SET_WORKSPACE, postData).then(res => {
            this.getWorkspaceList()
            if (res.Code === 0) {
              this.$message({
                type: 'success',
                message: '当前工作区设置成功'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    // 初始化表单
    initForm () {
      this.$refs.workspaceForm.resetFields()
      this.workspaceForm = {}
    },
    // 重置表单域
    resetForm () {
      this.initForm()
    },
    // 关闭弹窗
    closeDialog (name) {
      this.initForm()
      this.editDialogShow = false
    },
    // 提交表单
    submitForm () {
      this.$refs.workspaceForm.validate((valid) => {
        if (valid) {
          let postData = {
            Id: this.workspaceForm.Id,
            Name: this.workspaceForm.Name,
            AppId: this.appId
          }
          if (this.editMode === 'ADD') {
            ajax.post(api.ADD_WORKSPACE, postData).then(res => {
              if (res.Code === 0) {
                this.closeDialog()
                this.getWorkspaceList()
                this.$message({
                  type: 'success',
                  message: '新工作区创建成功'
                })
              }
            })
          } else {
            postData.CloneFrom = this.sourceId
            ajax.post(api.CLONE_WORKSPACE, postData).then(res => {
              if (res.Code === 0) {
                this.closeDialog()
                this.getWorkspaceList()
                this.$message({
                  type: 'success',
                  message: '工作区克隆成功'
                })
              }
            })
          }
        } else {
          return false
        }
      })
    }
  },
  created () {
    // this.height = window.innerHeight - 70
    if (!this.appId) {
      let appId = sessionStorage.getItem('appId')
      this.pd_updateAppId(appId)
    }
    this.$nextTick(() => {
      this.height = this.$refs.workBox.offsetHeight - 138
      this.getWorkspaceList()
    })
  }
}
</script>
<style lang="stylus">
#work-box
  height 100%
  background #f5f5f5
  overflow hidden
  .el-aside, .el-container, .el-menu
    height 100%
  .el-menu-item
    height 35px
    line-height 35px
  // .el-menu-item
  //   &:hover
  //     background-color #4c4c4c
  .el-table--border::after,
  .el-table--group::after,
  .el-table::before
    background #fff
  .checked
    display block
    margin-left 15px
    width 32px
    height 32px
    background url('') no-repeat center center
  .title
    height 60px
    padding 15px
    line-height 30px
    font-size 18px
    font-weight normal
    background #fff
  .mt10
    margin-top 10px
</style>
